<template>
	<div class="add">
		<div class="i_index_title">
			<span class="index_title">快速机选</span>
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
		</div>
		<div class="tab">
			<ul class="oul">
				<li v-for="(item,index) in date" @click="clic(index)" :style="{background:item.bgc,color:item.color}">
					{{item.name}}
				</li>
			</ul>
			<ul class="box">
				<li class="pic" v-show="indexClass==0">
					<div class="jiantou"></div>
					<div class="box_jix" v-for="(item,index) in shuangse">
						<div class="box_jix_p">
							<p class="jix_pji">机选{{item.name}}注</p>
							<p class="jix_psj">6个红球+1个蓝球</p>
						</div>
						<div @click="danxuan(item)" :class="item.check? 'box_jix_checked':'box_jix_check'">
						</div>
					</div>
				</li>
				<li class="pic" v-show="indexClass==1">
					<div class="jiantou2"></div>
					<div class="box_jix" v-for="(item,index) in sand">
						<div class="box_jix_p">
							<p class="jix_pji">机选{{item.name}}注</p>
							<p class="jix_psj">随机选择3个号码</p>
						</div>
						<div @click="danxuan1(item)" :class="item.check? 'box_jix_checked':'box_jix_check'">
						</div>
					</div>
				</li>
				<li class="pic" v-show="indexClass==2">
					<div class="jiantou3"></div>
					<div class="box_jix" v-for="(item,index) in qicai">
						<div class="box_jix_p">
							<p class="jix_pji">机选{{item.name}}注</p>
							<p class="jix_psj">7个红球</p>
						</div>
						<div @click="danxuan2(item)" :class="item.check? 'box_jix_checked':'box_jix_check'">
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		<div v-if="indexClass==0" >
			<div class="huakuai" @click="show1=true">
				<div class="multiple">
					<p>倍数</p>
					<span>最大五十倍</span>
				</div>
				<div class="quantity"  @click.stop>
					<van-stepper v-model="value" max="50" />
					<!-- <van-icon name="arrow" /> -->
				</div>
				<div class="notarize" @click.stop="tijiao(0)">
					<span>
						确认
					</span>
				</div>
			</div>
			<van-action-sheet v-model="show1">
				<div class="content">
					<div class="content_title">
						<div class="hong" style="margin-top: 10px;"><span class="neizi">{{ssd.length}}</span></div>
						<span style="font-weight: 600;">号码列表</span>
						<span style="margin-left: 50px; font-size: 19px;font-weight: 600;">倍数</span>
						<div style="margin-left: 10px;">
							<van-stepper v-model="value" max="50"/>
						</div>
						<div class="boxott" @click="show1=false">
							<van-icon name="cross" />
						</div>
					</div>
					<ul class="content_oul">
						<li v-for="(item,index) in ssd">
							<div class="content_oli_ball" v-for="(ite,idx) in item.red">{{ite}}</div>
							<div class="content_oli_ball_blue" v-for="(ite,idx) in item.blue">{{ite}}</div>
						</li>
					</ul>
					<div class="tc_tj">
						<div class="jine">￥{{jisuan1}}</div>
						<div class="qingchu" @click="hmdelete">
							<span>清除号码</span>
						</div>
						<div class="hm_tijiao" @click="tijiao(0)">
							<span>提交订单</span>
						</div>
					</div>
				</div>
			</van-action-sheet>
		</div>
		<div v-if="indexClass==1">
			<div class="huakuai" @click="show2=true">
				<div class="multiple">
					<p>倍数</p>
					<span>最大五十倍</span>
				</div>
				<div class="quantity" @click.stop>
					<van-stepper v-model="value" max="50" />
					<!-- <van-icon name="arrow" /> -->
				</div>
				<div class="notarize" @click.stop="tijiao(1)">
					<span>
						确认
					</span>
				</div>
			</div>
			<van-action-sheet v-model="show2">
				<div class="content">
					<div class="content_title">
						<div class="hong" style="margin-top: 10px;"><span class="neizi">{{sandd.length}}</span></div>
						<span style="font-weight: 600;">号码列表</span>
						<span style="margin-left: 50px; font-size: 19px;font-weight: 600;">倍数</span>
						<div style="margin-left: 10px;">
							<van-stepper v-model="value" max="50"/>
						</div>
						<div class="boxott" @click="show2=false">
							<van-icon name="cross" />
						</div>
					</div>
					<ul class="content_oul">
						<li v-for="(item,index) in sandd">
							<div class="content_oli_ball">{{item.ballone[0]}}</div>
							<div class="content_oli_ball">{{item.balltwo[0]}}</div>
							<div class="content_oli_ball">{{item.ballthree[0]}}</div>
						</li>
					</ul>
					<div class="tc_tj">
						<div class="jine">￥{{jisuan2}}</div>
						<div class="qingchu" @click="hmdelete">
							<span>清除号码</span>
						</div>
						<div class="hm_tijiao" @click="tijiao(1)">
							<span>提交订单</span>
						</div>
					</div>
				</div>
			</van-action-sheet>
		</div>
		<div v-if="indexClass==2">
			<div class="huakuai" @click="show3=true">
				<div class="multiple">
					<p>倍数</p>
					<span>最大五十倍</span>
				</div>
				<div class="quantity" @click.stop>
					<van-stepper v-model="value" max="50" />
					<!-- <van-icon name="arrow" /> -->
				</div>
				<div class="notarize" @click.stop="tijiao(2)">
					<span>
						确认
					</span>
				</div>
			</div>
			<van-action-sheet v-model="show3">
				<div class="content">
					<div class="content_title">
						<div class="hong" style="margin-top: 10px;"><span class="neizi">{{qlcd.length}}</span></div>
						<span style="font-weight: 600;">号码列表</span>
						<span style="margin-left: 50px; font-size: 19px;font-weight: 600;">倍数</span>
						<div style="margin-left: 10px;">
							<van-stepper v-model="value" max="50"/>
						</div>
						<div class="boxott" @click="show3=false">
							<van-icon name="cross" />
						</div>
					</div>
					<ul class="content_oul">
						<li v-for="(item,index) in qlcd">
							<div class="content_oli_ball" v-for="(ite,idx) in item.redball">{{ite}}</div>
						</li>
					</ul>
					<div class="tc_tj">
						<div class="jine">￥{{jisuan3}}</div>
						<div class="qingchu" @click="hmdelete">
							<span>清除号码</span>
						</div>
						<div class="hm_tijiao" @click="tijiao(2)">
							<span>提交订单</span>
						</div>
					</div>
				</div>
			</van-action-sheet>
		</div>
		
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { Dialog } from 'vant';
	export default {
	  data() {
	    return {
				indexClass:0,
				value:1,
				show1:false,
				show2:false,
				show3:false,
				date:[
					{
						name:'双色球',
						bgc:'#FFA9A9',
						color:'white'
					},
					{
						name:'福彩3D',
						bgc:'#BCDFFF',
						color:'#1591ED'
					},
					{
						name:'七彩乐',
						bgc:'#E5D3FF',
						color:'#9A61F7'
					}
				],
				shuangse:[
					{name:'1',check:false,},
					{name:'2',check:false,},
					{name:'3',check:false,},
					{name:'4',check:false,},
					{name:'5',check:false,}],
				sand:[
					{name:'1',check:false,},
					{name:'2',check:false,},
					{name:'3',check:false,},
					{name:'4',check:false,},
					{name:'5',check:false,}],
				qicai:[
					{name:'1',check:false,},
					{name:'2',check:false,},
					{name:'3',check:false,},
					{name:'4',check:false,},
					{name:'5',check:false,}],
				ssqred:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33'],
				ssqblue:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16'],
				sande:['0','1','2','3','4','5','6','7','8','9'],
				qicaili:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33'],
				qicaiblue:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16'],
				ssd:[],
				sandd:[],
				qlcd:[]
	    };
	  },
		components: {
		    [Dialog.Component.name]: Dialog.Component,
		  },
		computed:{
			jisuan1(){
				let aa=0
				this.ssd.forEach((item)=>{
					aa+=item.num
				})
				return aa*this.value
			},
			jisuan2(){
				let aa=0
				this.sandd.forEach((item)=>{
					aa+=item.num
				})
				return aa*this.value
			},
			jisuan3(){
				let aa=0
				this.qlcd.forEach((item)=>{
					aa+=item.num
				})
				return aa*this.value
			}
		},
		methods:{
			clic(index){
				this.indexClass = index;
				this.ssd=[]
				this.sandd=[]
				this.qlcd=[]
				this.value=1
				this.shuangse.forEach((item)=>{
					item.check=false
				})
				this.sand.forEach((item)=>{
					item.check=false
				})
				this.qicai.forEach((item)=>{
					item.check=false
				})
				// console.log(index)
			},
			fanhui(){
				this.$router.go(-1);
			},
			//双色球
			danxuan(item){
				// console.log(item)
				this.shuangse.forEach((ite)=>{
					ite.check=false
				})
				item.check=true
				let bb=[]
				for(let i=0;i<item.name;i++){
					let aa={
						red:this.suiji(this.ssqred,6),
						blue:this.suiji(this.ssqblue,1),
						num:2
					}
					bb.push(aa)
				}
				this.ssd=bb
				this.show1=true
			},
			//福彩3d
			danxuan1(item){
				this.sand.forEach((ite)=>{
					ite.check=false
				})
				item.check=true
				let bb=[]
				for(let i=0;i<item.name;i++){
					let aa={
						ballone:this.suiji(this.sande,1),
						balltwo:this.suiji(this.sande,1),
						ballthree:this.suiji(this.sande,1),
						num:2
					}
					bb.push(aa)
				}
				this.sandd=bb
				this.show2=true
			},
			//七乐彩
			danxuan2(item){
				this.qicai.forEach((ite)=>{
					ite.check=false
				})
				item.check=true
				let bb=[]
				for(let i=0;i<item.name;i++){
					let aa={
						redball:this.suiji(this.qicaili,7),
						num:2
					}
					bb.push(aa)
				}
				this.qlcd=bb
				this.show3=true
			},
			//随机数
			suiji(arr, count){
				var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
				    while (i-- > min) {
				        index = Math.floor((i + 1) * Math.random());
				        temp = shuffled[index];
				        shuffled[index] = shuffled[i];
				        shuffled[i] = temp;
				    }
				    return shuffled.slice(min);
			},
			//清除号码
			hmdelete(){
				Dialog.confirm({
				  message: '确认清除号码？',
				})
				  .then(() => {
				    // on confirm
						this.ssd=[]
						this.sandd=[]
						this.qlcd=[]
						this.shuangse.forEach((item)=>{
							item.check=false
						})
						this.sand.forEach((item)=>{
							item.check=false
						})
						this.qicai.forEach((item)=>{
							item.check=false
						})
				  })
				  .catch(() => {
				    // on cancel
				  });
				
			},
			tijiao(index){
				if(index==0){
					if(this.ssd!=''){
						let et=[]
						this.ssd.forEach((item)=>{
							let re={
								"buyCount": this.value,
								"ticketCode":JSON.stringify({red:item.red,blue:item.blue}),
								"buyType": 0,
							}
							et.push(re)
						})
						console.log(et)
						this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/submit',{
								"ticketId":2,
							  "couponItemId": 0,
							  "items": et
						},{
							headers:{
							  token:window.sessionStorage.getItem('token')
							}
						}).then((res) => {
							console.log(res.data)
							this.$router.push({path:'/order',query:res.data.data})
						})
					}else{
						Toast('请选择注数');
					}
				}
				if(index==1){
					if(this.sandd!=''){
						let et=[]
						this.sandd.forEach((item)=>{
							let re={
								"buyCount": this.value,
								"ticketCode":JSON.stringify({ballone:item.ballone,balltwo:item.balltwo,ballthree:item.ballthree}),
								"buyType": 0,
							}
							et.push(re)
						})
						console.log(index)
						this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/submit',{
								"ticketId":4,
							  "couponItemId": 0,
							  "items": et
						},{
							headers:{
							  token:window.sessionStorage.getItem('token')
							}
						}).then((res) => {
							console.log("跳转",res.data)
							this.$router.push({path:'/order',query:res.data.data})
						})
					}else{
						Toast('请选择注数');
					}
				}
				if(index==2){
					console.log(this.qlcd)
					if(this.qlcd!=''){
						let et=[]
						this.qlcd.forEach((item)=>{
							let re={
								"buyCount": this.value,
								"ticketCode":JSON.stringify({redball:item.redball}),
								"buyType": 0,
							}
							et.push(re)
						})
						this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/submit',{
								"ticketId":3,
							  "couponItemId": 0,
							  "items": et
						},{
							headers:{
							  token:window.sessionStorage.getItem('token')
							}
						}).then((res) => {
							console.log("跳转",res.data)
							this.$router.push({path:'/order',query:res.data.data})
						})
					}else{
						Toast('请选择注数');
					}
				}
			}
		}
	};
</script>

<style scoped>
	*{margin: 0; padding: 0;}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.tab{
		width: 95%;
		height: 450px;
		/* border: 1px solid red; */
		margin: 20px auto 0 ;
	}
	.oul{
		display: flex;
		height: 30px;
		margin: 0 auto;
	}
	.oul>li{
		margin-top: 0;
		height: 30px;
		flex: 1;
		text-align: center;
		line-height: 30px;
		border-radius: 30px;
		margin: 0 5px 0 5px;
	}
	.aa{
		display: none;
	}
	.pic{
		width: 100%;
		margin-top: 20px;
		display: block;
		background: white;
		border: 1px solid white;
		position: relative;
	}
	.jiantou{
		width: 50px;
		height: 50px;
		background-color: white;
		position: absolute;
		top: -5px;
		left: 30px;
		transform:rotate(45deg);
	}
	.jiantou2{
		width: 50px;
		height: 50px;
		background-color: white;
		position: absolute;
		top: -5px;
		left: 50%;
		margin-left: -20px;
		transform:rotate(45deg) ;
	}
	.jiantou3{
		width: 50px;
		height: 50px;
		background-color: white;
		position: absolute;
		top: -5px;
		right: 30px;
		transform:rotate(45deg);
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		font-size: 30px;
		color: white;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.huakuai{
		width: 100%;
		height: 50px;
		background: white;
		position: fixed;
		display: flex;
		bottom: 0;
	}
	.multiple{
		width: 100px;
		margin-left: 20px;
		/* border: 1px solid red; */
	}
	.multiple>p{
		font-size: 20px;
	}
	.multiple>span{
		font-size: 10px;
		border: 1px solid black;
	}
	.quantity{
		width: 150px;
		/* border: 1px solid red; */
		margin-top: 10px;
		font-size: 20px;
	}
	.notarize{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 20px;
		margin-left: 30px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.content_title{
		height: 50px;
		line-height: 50px;
		display: flex;
		margin: 10px;
		/* border: 1px solid red; */
	}
	.content_oul{
		max-height: 300px;
		/* border: 1px solid blue; */
		overflow: hidden;
		overflow: scroll;
	}
	.hong{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		margin: 5px;
		color: white;
		position: relative;
	}
	.neizi{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.content_oul>li{
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
	}
	.content_oli_ball{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 15px;
	}
	.content_oli_ball_blue{
		width: 30px;
		height: 30px;
		background-color: royalblue;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 30px;
	}
	.box_jix{
		width: 93%;
		height: 70px;
		background-color: #F7F8FA;
		margin: 10px auto;
		position: relative;
	}
	.box_jix_check{
		position: absolute;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 1px solid royalblue;
		top: 50%;
		right: 20px;
		transform: translate(0,-50%);
	}
	.box_jix_checked{
		position: absolute;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 1px solid royalblue;
		background-color: royalblue;
		top: 50%;
		right: 20px;
		transform: translate(0,-50%);
	}
	.box_jix_p{
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translate(0,-50%);
	}
	.jix_pji{
		font-size: 20px;
	}
	.jix_psj{
		font-size: 10px;
		color: #999999;
	}
	.oinp{
		width: 25px;
		height: 25px;
		margin-top: 10px;
	}
	.tc_tj{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.tc_tj>div{
		margin-top: 10px;
		height: 30px;
	}
	.jine{
		flex: 2;
		color:#F74A4B;
		/* border: 1px solid red; */
	}
	.qingchu{
		flex: 1;
		border: 1px solid #F74A4B;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 30px;
		background-color: white;
		color:#F74A4B;
		text-align: center;
		line-height: 30px;
	}
	.hm_tijiao{
		flex: 1;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 30px;
		background-color: #F74A4B;
		color:white;
		text-align: center;
		line-height: 30px;
	}
	.boxott{
		width: 25px;
		height: 25px;
		position: absolute;
		border-left: 1px solid #d0d0d0;
		margin-top: 10px;
		right: 15px;
		text-align: right;
		line-height: 30px;
		font-size: 18px;
		color: #d0d0d0;
	}
</style>
